import React, { Component } from 'react'
import './css/SwitchMask.less'
import { Link, withRouter } from 'react-router-dom'
import { Toast } from 'antd-mobile'






class Index extends Component {

    constructor(props) {
        super(props)
        this.state = {
            SwitchMaskHide: true,
            SwitchSelectKey: []
        }
    }

    componentDidMount() {
        if (this.props.refs) {
            this.props.refs(this)
        }

        // 单选时type传radio
        // 多选时type传checkbox
    }
    onWindowResize() {
    }

    render() {
        var { params } = this.props
        // console.log(params)
        return (
            this.state.SwitchMaskHide ? '' :
                < div className="SwitchMask">
                    <div className="maskItemBox">
                        <div className="maskItemTitle">{params.title}</div>
                        <div className="maskItemList">
                            {
                                params.switchMaskData.map((item, index) => {
                                    return (
                                        <div className="itemBox" key={index} onClick={() => {
                                            var SwitchSelectKey = this.state.SwitchSelectKey
                                            if (params.type === 'radio') {
                                                SwitchSelectKey = [index]
                                            } else if (params.type === 'checkbox') {
                                                if (SwitchSelectKey.indexOf(index) > -1) {
                                                    SwitchSelectKey.splice(SwitchSelectKey.indexOf(index), 1)
                                                } else {
                                                    SwitchSelectKey.push(index)
                                                }
                                            }
                                            this.setState({
                                                SwitchSelectKey
                                            })
                                        }}>
                                            <div className="itemTitle">{item.label}</div>
                                            {
                                                this.state.SwitchSelectKey.indexOf(index) > -1 ? <img className="itemIcon" src={require('./img/project/xuanzhong_icon@2x.png')} alt="" />
                                                    : <img className="itemIcon" src={require('./img/project/weixuanzhong_icon@2x.png')} alt="" />
                                            }
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className="maskItemBtnBox">
                            <button className="itemBtn" onClick={() => { this.changeStatus() }}>取消</button>
                            <button className="itemBtn confirmBtn" onClick={() => {

                                var callBackData = []
                                this.state.SwitchSelectKey.map(item => {
                                    callBackData.push(params.switchMaskData[item])
                                })
                                if (callBackData.length === 0) {
                                    Toast.fail('您还未选择')
                                    return
                                }
                                this.changeStatus()
                                params.onOk(callBackData)
                            }}>确定</button>
                        </div>
                    </div>
                </div >
        )
    }

    changeStatus = (type) => {
        this.setState({
            SwitchMaskHide: !this.state.SwitchMaskHide
        })
    }
}
export default withRouter(Index)